<template>
  <div>
    <!-- <home-header></home-header> -->
    <div class="cart-content">
      <div class="content">
        <div class="A"></div>
        <div class="shopBread">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/zong' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>购物车</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 购物车 -->
        <div class="cart">
          <ul class="cartList">
            <li class="cartHeader">
              <div class="checkH" style="width: 100px">
                <el-checkbox @change="Selecteds(select)" v-model="select"
                  >全选</el-checkbox
                >
              </div>
              <div style="width: 380px">商品信息</div>
              <div style="width: 200px">单价</div>
              <div style="width: 160px">数量</div>
              <div style="width: 160px">小计</div>
              <div style="width: 120px">操作</div>
            </li>
            <li>
              <div v-if="listData == null" class="boxsss">
                <el-empty description="描述文字"></el-empty>
              </div>
              <div v-else>
                <div
                  class="cartContent"
                  v-for="item in listData"
                  :key="item.id"
                >
                  <div class="checkH" style="width: 100px">
                    <el-checkbox
                      @change="Selected(item, item.selected, item.count)"
                      v-model="item.selected"
                    />
                  </div>
                  <div style="width: 380px" class="boxImg">
                    <img :src="item.picture" alt="" />
                    <div class="boxPXuan">
                      <p class="names">{{ item.name }}</p>
                      <el-popover
                        placement="bottom"
                        width="354"
                        trigger="click"
                      >
                        <div
                          class="amendBox"
                          v-for="(xiao, ind) in amend"
                          :key="ind"
                        >
                          <div class="amendP">{{ xiao.name }}</div>
                          <div class="sam">
                            <div
                              class="amendbox"
                              @click="imgs(xiaos, mend)"
                              ref="mend"
                              v-for="(xiaos, inds) in xiao.values"
                              :key="inds"
                            >
                              <img
                                v-show="xiaos.picture != null"
                                class="amendImg"
                                :src="xiaos.picture"
                                alt=""
                              />
                              <div v-show="xiaos.picture == null">
                                {{ xiaos.name }}
                              </div>
                            </div>
                          </div>
                        </div>
                        <el-button @click="Mark">确定</el-button>
                        <el-button slot="reference" @click="Gain(item.id)"
                          >{{ item.attrsText }}<i class="el-icon-arrow-down"></i
                        ></el-button>
                      </el-popover>
                    </div>
                  </div>
                  <div style="width: 200px; text-align: center">
                    ￥{{ item.price }}
                  </div>
                  <div style="width: 160px">
                    <el-input-number
                      size="small"
                      v-model="item.count"
                      @change="handleChange(item.count, item)"
                      :min="1"
                      :max="10"
                      label="描述文字"
                    ></el-input-number>
                  </div>
                  <div style="width: 160px; text-align: center">
                    ￥{{ item.price * item.count }}
                  </div>
                  <div style="width: 120px" class="del">
                    <div>移入收藏夹</div>
                    <div @click="onDel(item)">删除</div>
                    <div>找相屎</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 购物车底部 -->
        <div class="CartBottom">
          <div class="CartLeft">
            <p>
              <el-checkbox @change="Selecteds(select)" v-model="select"
                >全选</el-checkbox
              >
            </p>
            <div>删除商品</div>
            <div>移入收藏夹</div>
            <div>清空失效商品</div>
          </div>
          <div class="CartRight">
            <div>
              共{{ sumCounts }}件商品，已选择{{ Counts }}件，商品合计:
              <span style="color: red; font-size: 20px; font-weight: bold"
                >￥{{ sumPrice }}</span
              >
            </div>
            <el-button type="primary">下单结算</el-button>
          </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="YouList">
          <!-- <YouList></YouList> -->
        </div>
      </div>
    </div>
    <!-- <home-footer></home-footer> -->
  </div>
</template>

<script>
// import HomeHeader from '@/common/HomeHeader.vue'
// import HomeFooter from '@/common/HomeFooter.vue'
// import YouList from "./YouList.vue";
export default {
  //   components: { HomeHeader, HomeFooter, YouList },
  name: "ShopPing",
  data() {
    return {
      checked: true,
      listData: [],
      visible: false,
      amend: [],
      select: false,
      num: 1,
      sumCounts: 0,
      Counts: 0,
      sumPrice: 0,
    };
  },
  async created() {
    let res = await this.$http.ShopPing();
    this.listData = res.data.result;
    let select = this.listData.every((item) => {
      return item.selected == true;
    });
    this.select = select;
    this.sum();
  },
  methods: {
    // 获取图片旁边的数据
    async Gain(id) {
      this.amend = [];
      let res = await this.$http.ShopId(id);
      this.amend = res.data.result.specs;
      this.sum();
    },
    // 单选
    async Selected(item, selected, count) {
      await this.$http.SelectedCount(item.skuId, selected, count);
      let ress = await this.$http.ShopPing();
      this.listData = ress.data.result;
      let sel = this.listData.every((item) => {
        return item.selected == true;
      });
      this.select = sel;
      this.sum();
    },
    // 全选
    async Selecteds(s) {
      var item = this.listData;
      for (let i = 0; i < this.listData.length; i++) {
        await this.$http.SelectedCount(item[i].skuId, s, item[i].count);
      }
      let ress = await this.$http.ShopPing();
      this.listData = ress.data.result;
      this.sum();
    },
    imgs(item, a) {
      console.log(item, a);
    },
    Mark() {},
    // 删除
    async onDel(item) {
      let res = await this.$http.Delete({ ids: item.skuId });
      console.log(res, item);
    },
    // 个数
    async handleChange(value, item) {
      await this.$http.SelectedCount(item.skuId + "", item.selected, value);
      this.sum();
    },
    // 商品总数
    sum() {
      let sumCounts = 0;
      let Counts = 0;
      let sumPrice = 0;
      this.listData.forEach((item) => {
        sumCounts += item.count;
        if (item.selected == true) {
          Counts += item.count;
          sumPrice += item.count * item.price;
        }
      });
      this.sumCounts = sumCounts;
      this.Counts = Counts;
      this.sumPrice = sumPrice;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.cart-content {
  width: 100%;
  background: #f5f5f5;
}
.content .cart .cartContent .boxsss {
  width: 1240px;
  height: 300px;
}
.content .cart .cartContent .el-empty {
  height: 300px;
}
.content {
  width: 1240px;
  margin: 0 auto;
  padding-bottom: 20px;
  .A {
    width: 100%;
    height: 1px;
  }
  .shopBread {
    margin: 25px 10px;
    width: 1220px;
    height: 21px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    .el-breadcrumb__inner.is-link {
      font-weight: 0;
      color: #606266;
    }
    .el-breadcrumb__inner {
      color: #333;
    }
  }
  .cart {
    width: 1240px;
    background: #fff;
    .cartHeader {
      display: flex;
      color: #666;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      .checkH {
        padding: 10px 10px 10px 30px;
        text-align: left;
      }
      div {
        padding: 10px;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
    }
    .cartContent {
      display: flex;
      color: #666;
      border-bottom: 1px solid #f5f5f5;
      .checkH {
        padding: 10px 10px 10px 30px;
        text-align: left;
      }
      div {
        padding: 10px;
        height: 100px;
        line-height: 100px;
        text-align: left;
      }
      .del {
        height: 100px;
        line-height: 0px;
        padding: 10px;
        div {
          margin-top: 10px;
          line-height: 20px;
          padding: 0px;
          height: 20px;
          text-align: center;
        }
      }
      .boxImg {
        display: flex;
        img {
          width: 100px;
          height: 100px;
        }
        .boxPXuan {
          line-height: 35px;
          .names {
            width: 270px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .CartBottom {
    width: 1180px;
    height: 80px;
    background: #fff;
    padding: 0 30px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .CartLeft {
      display: flex;
      height: 50px;
      line-height: 50px;
      div {
        margin-left: 20px;
        font-size: 14px;
      }
    }
    .CartRight {
      display: flex;
      height: 50px;
      line-height: 50px;
      .el-button {
        margin-left: 20px;
        padding: 0 50px;
      }
    }
  }
  .YouList {
    width: 1240px;
    height: 460px;
    background: #fff;
    margin-top: 20px;
  }
}
.amendBox {
  padding: 10px;
  display: flex;
  .sam {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 15px;
    .amendbox {
      border: 1px solid #333;
      margin: 3px 10px;
    }
    .borders {
      border: 1px solid red;
    }
    div {
      padding: 3px 5px;
      text-align: center;
    }
  }
}
.el-input-number {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-input-number__increase {
  line-height: 32px;
  top: 44px;
  right: 11px;
}
::v-deep .el-input-number__decrease {
  line-height: 32px;
  top: 44px;
  left: 11px;
}
.amendImg {
  width: 34px;
  height: 34px;
}
::v-deep element.style {
  left: 393px;
}
</style>